<template>
  <!-- 消息通知 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show="showSearch"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="消息类型" prop="theType">
        <el-select
          v-model="queryParams.theType"
          @change="handleQuery"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input
          v-model="queryParams.keywords"
          placeholder="请输入姓名/手机号"
          learable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['81210']"
          @click="handleAdd"
          >增加消息</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          v-hasPermi="['81240']"
          :disabled="multiple"
          @click="handleDelete"
          >批量删除</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="tableList"
      :border="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="消息类型" prop="typeVal" align="center" />
      <el-table-column label="消息标题" prop="title" align="center">
        <template slot-scope="scope">
          <span @click="displaypop(scope.row)" class="active">
            {{ scope.row.title }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="发布人数" prop="personnelNum" align="center">
        <template slot-scope="scope">
          <span @click="handleSee(scope.row)" class="active">
            {{ scope.row.personnelNum }}
          </span>
        </template>
      </el-table-column>
      <!-- 发布（是/否） -->
      <el-table-column label="发布状态" align="center" prop="reviewStatus">
        <template slot-scope="scope">
          <span>{{ findReview(scope.row.reviewStatus) }}</span>
        </template>
      </el-table-column>
      <!-- 附件状态（有/无） -->
      <!-- <el-table-column label="附件状态" align="center" prop="enclosureStatus">
        <template slot-scope="scope">
          <span>{{ findEnclosure(scope.row.enclosureStatus) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="发布时间" align="center" prop="reviewTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.reviewTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布人" prop="reviewer" align="center" />
      <!-- <el-table-column label="置顶" prop="tableList" align="center" /> -->
      <!-- <el-table-column align="center" prop="img" label="配图" width="240"
        ><template slot-scope="scope"
          ><img :src="scope.row.img" width="200" height="100"
        /></template>
      </el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="100"
      >
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" @click="displaypop(scope.row)">显示</el-button> -->
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['81220']"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['81230']"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <!-- <el-button size="mini" type="text" @click="topping(scope.row)">置顶</el-button>
          <el-button size="mini" type="text" @click="handleSee('child')">人员设置</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pagesize"
      @pagination="getList"
    />

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <!-- *消息类型（下拉框）、*消息标题、*消息内容（富文本）、附件 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="消息类型" prop="typeId">
              <el-select
                v-model="form.typeId"
                @change="changeType"
                placeholder="请选择类型"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消息标题" prop="title">
              <el-input v-model="form.title" placeholder="消息标题" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="消息内容" prop="content">
          <editor v-model="form.content" :min-height="192" />
        </el-form-item>
        <!-- 上传文件 视频，图片 -->
        <!-- <el-form-item label="附件" prop="enclosure">
          <el-input v-model="form.enclosure" placeholder="附件链接" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancel">返回</el-button>
      </div>
    </el-dialog>

    <!-- 显示弹窗 显示消息   -->
    <el-dialog
      title="显示消息"
      :visible.sync="openset"
      width="700px"
      append-to-body
    >
      <el-form
        ref="form3"
        :model="form"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="消息类型" prop="typeVal">
              <el-input v-model="form.typeVal" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消息标题" prop="title">
              <el-input v-model="form.title" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item prop="thePic" label="配图" width="240">
          <uploadImage v-model="form.thePic" disabled />
        </el-form-item> -->
        <el-form-item label="消息内容" prop="content">
          <editor v-model="form.content" :min-height="192" readOnly />
        </el-form-item>
        <!-- 附件 enclosure -->
        <!-- <el-form-item label="附件" prop="enclosure">
          <el-input v-model="form.enclosure" disabled />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel2">返回</el-button>
      </div>
    </el-dialog>

    <!-- 发布人员 -->
    <el-dialog
      :title="title"
      width="800px"
      :visible.sync="openperson"
      append-to-body
    >
      <el-row :gutter="10" class="mb8">
        <!-- <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addPeople(1)"
            >添加企业员工人员</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addPeople(2)"
            >添加外委人员</el-button
          >
        </el-col> -->
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addPeople(1)"
            >添加人员</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="deletePeople"
            >批量删除</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button plain icon="el-icon-plus" size="mini" @click="release">
            确认发布
          </el-button>
        </el-col>
        <!-- <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getListPer"
        ></right-toolbar> -->
      </el-row>
      <el-table
        :data="tableList2"
        @selection-change="handleSelectionChange"
        :border="true"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="姓名"
          prop="fullName"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="部门" prop="department" align="center" />
        <el-table-column label="工种" prop="workType" align="center" />
        <el-table-column label="岗位" prop="post" align="center" />
        <el-table-column label="发布状态" align="center" prop="sendStatus">
          <template slot-scope="scope">
            <span>{{ findSendStatus(scope.row.sendStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="读取状态" align="center" prop="reviewStatus">
          <template slot-scope="scope">
            <span>{{ findReviewStatus(scope.row.reviewStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
          width="100"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="deletePeople(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total2 > 0"
        :total="total2"
        :page.sync="queryParamsPer.currentPage"
        :limit.sync="queryParamsPer.pagesize"
        @pagination="getListPer"
      />
    </el-dialog>

    <!-- 添加人员 （添加企业员工人员、添加外委人员） -->
    <!-- width="800px" 
      :fullscreen="true"-->
    <el-dialog
      :title="titleAddPeople"
      class="add-person"
      :visible.sync="openAddPeople"
      width="1200px"
      append-to-body
    >
      <el-row :gutter="20">
        <el-col :span="7" :xs="24">
          <el-tabs v-model="curTabs" type="card" @tab-click="handleClick">
            <el-tab-pane label="部门" name="deptId">
              <div class="head-container">
                <!-- value-consists-of="ALL_WITH_INDETERMINATE" -->
                <treeselect
                  v-model="currValue1"
                  :multiple="true"
                  :options="deptOptions"
                  :show-count="true"
                  :alwaysOpen="true"
                  :minHeight="250"
                  :limit="5"
                  :defaultExpandLevel="Infinity"
                  placeholder="请选择"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="工种" name="workType">
              <div class="head-container">
                <treeselect
                  v-model="currValue2"
                  :multiple="true"
                  :options="workOptions"
                  :show-count="true"
                  :alwaysOpen="true"
                  :minHeight="250"
                  :limit="5"
                  :defaultExpandLevel="Infinity"
                  placeholder="请选择"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="岗位" name="postId">
              <div class="head-container">
                <treeselect
                  v-model="currValue3"
                  :multiple="true"
                  :options="postOptions"
                  :show-count="true"
                  :alwaysOpen="true"
                  :minHeight="250"
                  :limit="5"
                  :defaultExpandLevel="Infinity"
                  placeholder="请选择"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="指定班组" name="fourth">
              <div class="head-container">
                <treeselect
                  v-model="currValue4"
                  :multiple="true"
                  :options="teamOptions"
                  :show-count="true"
                  :alwaysOpen="true"
                  :minHeight="250"
                  :limit="5"
                  :defaultExpandLevel="Infinity"
                  placeholder="请选择"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="16" :xs="24">
          <el-form
            :model="queryParams2"
            ref="addPeopleParams"
            :inline="true"
            label-width="80px"
          >
            <el-form-item label="选中人数" prop="checkNum">
              <el-input
                v-model="checkNum"
                placeholder="请输入选中人数"
                disabled
                style="width: 240px"
                size="small"
              />
            </el-form-item>

            <el-form-item label="关键字" prop="keywords">
              <el-input
                v-model="queryParams2.keywords"
                placeholder="请输入姓名"
                clearable
                style="width: 240px"
                @keyup.enter.native="getPersonList"
                size="small"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getPersonList"
                >搜索</el-button
              >
              <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
            </el-form-item>
          </el-form>

          <el-table
            :data="tableListPer"
            @selection-change="handleSelectionChangePer"
            :border="true"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="姓名"
              prop="fullName"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="部门" prop="department" align="center" />
            <el-table-column label="工种" prop="workType" align="center" />
            <el-table-column label="岗位" prop="post" align="center" />
            <el-table-column label="发布状态" align="center" prop="sendStatus">
              <template slot-scope="scope">
                <span>{{ findSendStatus(scope.row.sendStatus) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="读取状态"
              align="center"
              prop="reviewStatus"
            >
              <template slot-scope="scope">
                <span>{{ findReviewStatus(scope.row.reviewStatus) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="totalPer > 0"
            :total="totalPer"
            :page.sync="queryParams2.currentPage"
            :limit.sync="queryParams2.pagesize"
            @pagination="getPersonList"
          />
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddPeople">确定</el-button>
        <el-button @click="cancelAddPeople">取消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          <el-button type="warning" plain size="mini" @click="importTemplate"
            >下载模板</el-button
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import UploadImage from "@/components/ImageUpload";
import Editor from "@/components/Editor";

import {
  getPage,
  listData,
  getData,
  addData,
  updateData,
  delData,
  delMultiData,
  toReleaseMsg,
  setReceiverReleaseMsg,
  getPersonnelList,
} from "@/api/notice/notice";
import { getInstitutions, getDepartment, getDict } from "@/api/select";
import { listData as personListData } from "@/api/system/personAdmin";
import { listData as outPersonListData } from "@/api/system/outPersonnel";
import {
  listData as teamSetListData,
  getPersonnelList as getTeamPersonnelList,
} from "@/api/system/teamSet";
export default {
  name: "noticeMsg",
  data() {
    return {
      queryParams: {
        currentPage: 1,
        pagesize: 10,
        keywords: undefined,
        category: 2,
        theType: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      showSearch: true,
      loading: true,
      tableList: [],
      ids: [],
      single: true,
      multiple: true,
      total: 0,
      title: "",
      open: false,
      form: {},
      rules: {
        typeId: [
          { required: true, message: "请选择消息类型", trigger: "change" },
        ],
        title: [
          { required: true, message: "消息标题不能为空", trigger: "blur" },
        ],
        content: [
          { required: true, message: "消息内容不能为空", trigger: "blur" },
        ],
      },
      openset: false, //显示消息
      //添加人员
      /**
       * 企业员工人员  部门、工种、岗位
       * 添加外委人员  工作单位、工种
       */
      openperson: false,
      currNoticeId: null, //点击发布人数-人员设置 对应的当前消息id
      queryParamsPer: {
        currentPage: 1,
        pagesize: 10,
        theid: undefined,
      },
      total2: 0,
      tableList2: [],
      currDialog: undefined, //当前打开“添加人员弹框” 的按钮
      // tabs: [],
      curTabs: "deptId",
      openAddPeople: false, //添加人员弹框
      titleAddPeople: "",
      currValue1: [], //添加人员 左侧树当前选中节点
      currValue2: [], //添加人员 左侧树当前选中节点
      currValue3: [], //添加人员 左侧树当前选中节点
      currValue4: [], //添加人员 左侧树当前选中节点
      queryParams2: {
        //获取员工列表
        currentPage: 1,
        pagesize: 10,
        keywords: undefined,
        deptId: undefined, //部门  获取员工列表接口
        workType: undefined, //工种  获取员工列表接口
        postId: undefined, //岗位  获取员工列表接口
        unitId: undefined, //工作单位id  获取外委人员列表接口
        theid: undefined, //班组id  获取班组对应人员列表接口
      },
      queryParamsTeam: {
        //获取员工列表
        currentPage: 1,
        pagesize: 10,
        keywords: undefined,
        theType: 1, //班组类别 1-内部员工 2-外委人员
      },
      totalPer: 0,
      tableListPer: [],
      ids2: [],
      // 设置消息接收人员并完成发布 参数
      releaseParams: {},

      radio: "1",
      // 开始时间
      valuestater: "",
      // 结束时间
      valueend: "",
      // 上传图片
      imageUrl: "",
      // 角色选项
      roleOptions: [],
      // 查询参数

      moreForm: {
        license: "",
        creditCode: "",
        contacts: "",
        phone: "",
        synopsis: "",
      },
      // 显示搜索条件

      /**功能按钮 */
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        openset: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        url: "",
      },
      /**表格展示 */

      // 弹出层标题

      // 人员设置弹窗

      // 添加人员弹窗
      open3: false,
      // 表单参数

      form2: {
        post: null,
        typeWork: null,
        epartment: null,
      },
      form3: {
        drawing: null,
        messageTitle: null,
        roleIds: null,
        messageContained: null,
        topping: null,
        enclosure: null,
      },
      // mainForm: {
      //   fullName: "",
      //   shorterName: "",
      //   logo: "",
      //   trade: "",
      //   website: "",
      //   realmName: "",
      //   status: false,
      //   id: "72020",
      // },
      // 表单校验
      rules2: {
        messageContained: [
          { required: true, message: "消息内容不能为空", trigger: "blur" },
        ],
      },
      queryParams: {
        deptId: undefined,
        keywords: undefined,
      },
      // 表单校验

      // 角色选项
      roleOptions: [],
      // 状态数据字典
      open2: false,
      loading2: true,
      tableList2: [],
      rules3: {},

      deptOptions: [],
      postOptions: [],
      workOptions: [],
      typeOptions: [],
      unitOptions: [],
      teamOptions: [],
    };
  },
  components: {
    Treeselect,
    UploadImage,
    Editor,
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    checkNum() {
      //添加人员 选中人数
      return this.ids2.length;
    },
  },
  watch: {
    currValue1(newVal, oldVal) {
      if (newVal != oldVal) {
        if (newVal.length > 0) {
          this.queryParams2.deptId = newVal.join(",");
          this.getPersonList();
        } else {
          this.tableListPer = [];
        }
      }
    },
    currValue2(newVal, oldVal) {
      if (newVal != oldVal) {
        if (newVal.length > 0) {
          this.queryParams2.workType = newVal.join(",");
          this.getPersonList();
        } else {
          this.tableListPer = [];
        }
      }
    },
    currValue3(newVal, oldVal) {
      if (newVal != oldVal) {
        if (newVal.length > 0) {
          this.queryParams2.postId = newVal.join(",");
          this.getPersonList();
        } else {
          this.tableListPer = [];
        }
      }
    },
    currValue4(newVal, oldVal) {
      if (newVal != oldVal) {
        if (newVal.length > 0) {
          this.queryParams2.theid = newVal.join(",");
          this.getPersonList();
        } else {
          this.tableListPer = [];
        }
      }
    },
  },
  created() {
    this.getList();
    // 获取数据字典
    getDict(11, 0).then((response) => {
      //11-岗位
      this.postOptions = response.result.data;
    });
    getDict(12, 0).then((response) => {
      //12-工种
      this.workOptions = response.result.data;
    });
    getDict(32, 0).then((response) => {
      //32-消息类型
      this.typeOptions = response.result.data;
    });
    this.getSelectDept(); //部门信息
    this.getSelectUnit(); //工作单位
    this.getTeam(); //获取班组
  },
  mounted() {},
  methods: {
    getList() {
      this.loading = true;
      this.queryParams.dictId = this.currentId;
      listData(this.queryParams).then((response) => {
        this.tableList = response.result.rows;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    getSelectUnit() {
      getInstitutions().then((response) => {
        this.unitOptions = response.result.data;
      });
    },
    getSelectDept() {
      getDepartment().then((response) => {
        this.deptOptions = response.result.data;
      });
    },
    getTeam() {
      teamSetListData(this.queryParamsTeam).then((response) => {
        console.log("team", response);
        if (response.result.rows.length > 0) {
          this.teamOptions = response.result.rows.map((item) => {
            return {
              id: item.theid,
              label: item.title,
            };
          });
        } else {
          this.teamOptions = [];
        }
      });
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    handleUpdate(row) {
      this.reset();
      const theId = row.theid;
      getData(theId).then((response) => {
        this.form = response.result;
        this.open = true;
        this.title = "修改";
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.theid != undefined) {
            updateData(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addData(this.form).then((response) => {
              this.msgSuccess("添加成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        category: 2,
        typeId: undefined,
        typeVal: undefined,
        title: undefined,
        content: undefined,
        enclosure: undefined,
      };
      this.resetForm("form");
    },
    handleDelete(row) {
      const theId = row.theid || this.ids;
      let idListStr = this.ids.join(",");
      if (row.theid) {
        //删除
        this.$confirm(
          '是否确认删除?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return delData(theId);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          });
      } else {
        //批量删除
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return delMultiData(idListStr);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          });
      }
    },
    // 消息显示
    displaypop(row) {
      this.reset();
      const theId = row.theid;
      getData(theId).then((response) => {
        this.form = response.result;
        this.openset = true;
      });
    },
    cancel2() {
      this.openset = false;
      this.reset();
    },
    // 发布人数-人员设置
    handleSee(row) {
      const theId = row.theid;
      this.currNoticeId = theId;
      this.queryParamsPer.theid = theId;
      // 获取人员列表数据
      if (row.personnelNum) {
        //如果当前消息 有发布人数
        this.getListPer(); // 获取接受“当前消息”对应的“人员名单”
      } else {
        this.tableList2 = [];
      }
      this.openperson = true;
      this.title = "人员设置";
    },
    // 获取接受“当前消息”对应的“人员名单”
    getListPer() {
      getPersonnelList(this.queryParamsPer).then((response) => {
        if (response.code === 200) {
          this.tableList2 = response.result.rows;
          this.total2 = response.result.total;
        }
      });
    },
    // 添加人员（按钮）
    addPeople(val) {
      this.resetAddPeople();
      this.curTabs = "deptId"; //给tab一个默认值
      this.currDialog = val;
      this.openAddPeople = true;
      if (val === 1) {
        // this.tabs 部门、工种、岗位、指定班组
        // this.titleAddPeople = '添加企业员工人员'
        this.titleAddPeople = "添加人员";
      } else if (val === 2) {
        // this.tabs 工作单位、工种、指定班组
        this.titleAddPeople = "添加外委人员";
      }
    },
    /**
     * 添加人员弹框-逻辑
     * 用户切换tab、选择左侧树节点（用户页面操作）
     * 系统监听左侧树绑定值（watch）
     * 获取对应的添加人员的数据（调用getPersonList接口）
     * 选择添加的人（handleSelectionChangePer）
     * 确定添加（submitAddPeople）
     * 取消添加（cancelAddPeople）
     */
    // 切换 添加人员弹框 左侧tab
    handleClick(tab, event) {
      this.resetAddPeople(); //重置值
    },
    // 获取添加的人员的数据
    getPersonList() {
      if (this.currDialog === 1) {
        //添加企业员工人员
        if (this.queryParams2.theid) {
          //说明现在添加的人员是：班组对应的人员
          getTeamPersonnelList(this.queryParams2).then((response) => {
            console.log("response", response.result);
            this.tableListPer = response.result.rows;
            this.totalPer = response.result.total;
          });
        } else {
          //说明现在添加的人员是：部门、工种、岗位对应的人员
          personListData(this.queryParams2).then((response) => {
            this.tableListPer = response.result.rows;
            this.totalPer = response.result.total;
          });
        }
      } else if (this.currDialog === 2) {
        //添加外委人员
        /* outPersonListData(this.queryParams2).then((response) => {
          // this.tableList2 = response.result.rows;
          // this.totalPer = response.result.total;
        }); */
      }
    },
    // 选择添加的人
    handleSelectionChangePer(selection) {
      this.ids2 = selection;
    },
    // 确定 添加人员
    submitAddPeople() {
      if (this.checkNum > 0) {
        //选中人数大于0
        let arr = this.tableList2.concat(this.ids2); //将需要添加的人和已添加的人拼接
        this.tableList2 = this.unique(arr); //将拼接好的数据去重
      }
      this.openAddPeople = false;
    },
    cancelAddPeople() {
      this.openAddPeople = false;
      this.resetAddPeople();
    },
    resetAddPeople() {
      this.tableListPer = [];
      this.ids2 = [];
      this.currValue1 = [];
      this.currValue2 = [];
      this.currValue3 = [];
      this.currValue4 = [];
      this.queryParams2 = {
        currentPage: 1,
        pagesize: 10,
        unitId: undefined,
        deptId: undefined,
        workType: undefined,
        postId: undefined,
        theid: undefined,
      };
    },
    /** 人员设置弹框-确认发布 */
    release() {
      this.resetRelease();
      let _this = this;
      if (this.tableList2.length > 0) {
        let idArr = [],
          personnelArr = [];
        this.tableList2.forEach((item) => {
          idArr.push(item.theid);
          personnelArr.push(`${item.department} - ${item.fullName}`);
        });
        this.releaseParams.personnelIds = idArr.join(","); //消息接收人员名单id列表
        this.releaseParams.personnels = personnelArr.join(","); //消息接收人员名单（格式：部门-姓名）
        this.releaseParams.personnelNum = idArr.length; //发布人数
      }
      // 确定针对新增人员发布消息吗？
      this.$confirm("是否确认发布?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "放弃",
        type: "warning",
      })
        .then(function () {
          return setReceiverReleaseMsg(_this.releaseParams);
        })
        .then(() => {
          this.openperson = false;
          this.getList();
          this.msgSuccess("发布成功");
        });
    },
    resetRelease() {
      this.releaseParams = {
        theid: this.currNoticeId, //id  在打开设置人员弹框时，赋值
        personnelType: 1, //消息接收人员类别 1-内部员工 2-外委人员
        personnelIds: undefined, //消息接收人员名单id列表
        personnelNum: undefined, //发布人数
        personnels: undefined, //消息接收人员名单（格式：部门-姓名）
        reviewerId: this.userInfo.theid, //发布人id
        reviewer: this.userInfo.thename, //发布人
      };
    },
    /** 人员设置弹框 - 删除/批量删除 */
    deletePeople(row) {
      let _this = this;
      const theId = row.theid;
      if (row.theid) {
        //删除
        this.$confirm(
          '是否确认删除?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(function () {
          _this.tableList2 = _this.tableList2.filter((item) => {
            return item.theid != theId;
          });
          _this.msgSuccess("删除成功");
        });
      } else {
        //批量删除
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(function () {
          /* _this.tableList2 = _this.tableList2.filter(item => {
            return _this.ids.indexOf(item.theid) != -1
          }) */
          let newArr = [],
            flag = true;
          _this.tableList2.forEach((item) => {
            // 遍历每一个元素 判断当前元素，是否是要删除的元素
            // 把所有不需要删除的元素找到
            flag = _this.ids.some((id) => {
              return item.theid === id; //只要一个为turn,就会返回true 为true，说明是要删除的元素 为false，说明要保留的元素
            });
            if (flag === false) {
              newArr.push(item);
            }
          });
          _this.tableList2 = newArr;
          _this.msgSuccess("删除成功");
        });
      }
    },

    // 数组去重
    unique(arr) {
      // 利用对象访问属性的方法，判断对象中是否存在key
      var result = [];
      var obj = {};
      for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i].theid]) {
          result.push(arr[i]);
          obj[arr[i].theid] = true;
        }
      }
      return result;
    },

    /** 表格展示部分------------------- */
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.theid);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 下载模板操作 */
    importTemplate() {
      /* importTemplate().then(response => {
        this.download(response.msg);
      }); */
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },

    //置顶按钮
    topping(row) {
      const userIds = row.userId || this.ids;
      this.$confirm(
        '是否确认置顶角色编号为"' + userIds + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          // 调接口
          // return delRole(userIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("置顶成功");
        });
    },

    findReview(val) {
      //发布状态 0-待发布 1-已发布
      if (val === 0) return "待发布";
      else if (val === 1) return "已发布";
    },
    findEnclosure(val) {
      //附件状态 0-无 1-有
      if (val === 0) return "无";
      else if (val === 1) return "有";
    },
    findSendStatus(val) {
      //发布状态 0-待发布 1-已发布 新添加的人-待发布
      if (val === 0) return "待发布";
      else if (val === 1) return "已发布";
      else return "待发布";
    },
    findReviewStatus(val) {
      //读取状态 0-待读取 1-已读取 新添加的人-待读取
      if (val === 0) return "待读取";
      else if (val === 1) return "已读取";
      else return "已读取";
    },
    changeType(val) {
      if (this.typeOptions.length > 0) {
        this.form.typeVal = val
          ? this.typeOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
  },
};
</script>

<style scoped lang="scss">
// /deep/
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* /deep/ .el-dialog:not(.is-fullscreen){
	min-height: 420px;
} */
.add-person /deep/ .el-dialog__body {
  padding: 0 20px 30px;
  min-height: 520px;
}
.tabs {
  width: 100%;
  height: 40px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  li {
    padding: 4px 10px;
    color: #409eff;
    margin-right: 20px;
    cursor: pointer;
  }
  li.active {
    background: #409eff;
    color: #fff;
  }
}
.vue-treeselect__input {
  display: block;
}
.add-person /deep/ .el-select {
  display: block;
}

.add-person /deep/ .el-tabs__content {
  overflow: unset;
}
.vue-treeselect__multi-value-item {
  font-size: 16px;
}
/deep/ .vue-treeselect--open-below .vue-treeselect__menu {
  // max-height: none !important;
  max-height: 480px !important;
}
/deep/ .el-dialog:not(.is-fullscreen) {
  max-height: none;
}
</style>